<script setup lang="ts">
import {
  ref,
  computed,
  watch,
  defineProps,
  nextTick,
  onMounted,
  onUnmounted,
  type Ref
} from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";

import { xemitter } from "@/utils/mitt";

const { isDark } = useDark();

defineProps({
  width: {
    type: String as PropType<string>,
    default: "100%"
  },
  height: {
    type: String as PropType<string>,
    default: "250px"
  }
});

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
  // return "dark";
});

const radarChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(
  radarChartRef as Ref<HTMLDivElement>,
  {
    theme
  }
);

onMounted(() => {
  nextTick(() => {
    xemitter.on("emitPieData", data => {
      console.log("onPieData", data);
      drawChart(data);
    });
  });
  drawChart();
});

// onUnmounted(() => {
//   xemitter.off("emitPieData");
// });

const drawChart = params => {
  // 写一段代码判断参数是否有itemStyle属性,有的话合并属性值，没有的话就直接赋值空对象

  setOptions({
    // color: ["#67F9D8", "#FFE434", "#56A3F1", "#FF917C"],
    color: ["#FF917C"],
    title: {
      text: "风险分布"
    },
    // legend: {},
    radar: {
      indicator: [
        { text: "Indicator1", max: 150 },
        { text: "Indicator2", max: 150 },
        { text: "Indicator3", max: 150 },
        { text: "Indicator4", max: 120 },
        { text: "Indicator5", max: 108 },
        { text: "Indicator6", max: 72 }
      ],
      // center: ["75%", "50%"],
      radius: "75%",
      axisName: {
        color: "#fff",
        backgroundColor: "#666",
        borderRadius: 3,
        padding: [3, 5]
      }
    },
    series: [
      {
        type: "radar",
        // radarIndex: 1,
        data: [
          {
            value: [100, 93, 50, 90, 70, 60],
            name: "Data D",
            areaStyle: {
              color: "rgba(255, 145, 124, 0.9)"
              // color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
              //   {
              //     color: "rgba(255, 145, 124, 0.1)",
              //     offset: 0
              //   },
              //   {
              //     color: "rgba(255, 145, 124, 0.9)",
              //     offset: 1
              //   }
              // ])
            }
          }
        ]
      }
    ]
  });
};

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="radarChartRef" :style="{ height, width }" />
</template>
